<template>
    <div class="mt-3">
        <div class="font-bold flex items-center justify-between">
            <span>{{ toZhDigit(i + 1) }}、</span>
            <el-button @click="deleteQuestion" type="danger" size="small">删除</el-button>
        </div>
        <el-form ref="formRef" :model="global.question" label-width="80" class="mt-3">
            <el-form-item label="大题名称" prop="name">
                <el-input @chang="onChange" v-model="global.question.name" placeholder="请输入" class="w-full" />
            </el-form-item>
            <el-form-item label="总分" class="mt-3">
                <el-input :value="total" disabled placeholder="自动计算" class="w-full" />
            </el-form-item>
            <el-form-item label="题目类型" prop="type" class="mt-3">
                <el-select 
                v-model="global.question.questionsType" 
                @chang="onChange" 
                placeholder="请选择题目类型"
                >
                    <el-option 
                    v-for="item in props.questionsTypeList" 
                    :key="item.id"
                    :label="item.label"
                    :value="item.id" 
                    @chang="onChange"
                    />
                </el-select>
            </el-form-item>
            <el-form-item label="小题" prop="difficulty" class="mt-3">
                <div class="w-full">
                    <SmallQuestion 
                    v-for="(item, index) in global.question.paperQuestionsTypeDetailDtos"
                    :category-list="categoryList"
                    :index="index"
                    v-model:model-value="global.question.paperQuestionsTypeDetailDtos[index]"
                    @chang="onChange"
                    @del="onDelSmallQuestion"
                    :ref="(el: any) => addSmallQuestionRef(el, item.uuid)"
                    />
                    <div>
                        <el-button @click="addSmallQuestion" class="mt-4">+ 添加小题</el-button>
                    </div>
                </div>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup lang="ts">
import { computed, reactive, watch, ref, type VNodeRef } from 'vue';
import { createUuid, toZhDigit} from '@/Utils/utils';
import type { GeneratePaperSmallQuestion, TopicTypeNumber } from '@/Utils/type';
import type { FormInstance } from 'element-plus';
import SmallQuestion from './Children/SmallQuestion.vue';

const formRef = ref<FormInstance>();

interface GeneratePaperSmallQuestionItem extends GeneratePaperSmallQuestion {
    uuid: string;
}

type SmallQuestionType = InstanceType<typeof SmallQuestion>;

interface SmallQuestionRef {
    [propName: string]: SmallQuestionType;
};

interface Questions {
    name: string;
    questionsType: TopicTypeNumber;
    paperQuestionsTypeDetailDtos: GeneratePaperSmallQuestionItem[];
}

const emit = defineEmits(['change', 'update:modelValue', 'delete']);

const props = defineProps<{
    modelValue: Questions;
    topicList: any[];
    i: number;
    questionsTypeList: any[];
    categoryList: any[];
}>();

const global = reactive({
    question: props.modelValue,
});

const smallQuestionRefs = reactive<SmallQuestionRef>({});

const total = computed(() => {
    const total = global.question.paperQuestionsTypeDetailDtos.reduce((total: number, item) => {
        total += item.score * item.num;
        return total;
    }, 0)
    if (total == 0) return '';
    return total;
});

const addSmallQuestionRef = (el: SmallQuestionType, key: string) => {
    smallQuestionRefs[key] = el;
    return el as unknown as VNodeRef;
};

const onChange = () => {
    // console.log(global.question)
    emit('update:modelValue', global.question);
    emit('change', global.question);
};

const onDelSmallQuestion = (index: number) => {
    global.question.paperQuestionsTypeDetailDtos.splice(index, 1);
    onChange();
};

// 点击添加小题
const addSmallQuestion = () => {
    global.question.paperQuestionsTypeDetailDtos.push({
        categoryId: '',
        difficulty: 1,
        num: 1,
        score: 3,
        uuid: createUuid(),
    });
    onChange();
};

defineExpose({
    validate: () => {
        return Promise.allSettled([
            formRef.value?.validate(), 
            ...global.question.paperQuestionsTypeDetailDtos.map(item => smallQuestionRefs[item.uuid]?.validate())
        ]);
    }
});

const deleteQuestion = () => emit('delete');

watch(
    () => props.modelValue,
    () => {
        global.question = props.modelValue
    },
    {
        deep: true
    }
);
</script>